<template>
  <div>Helloworld {{ a }}</div>
  <div class="box"></div>
  <div>
    <button @click="add">添加</button>
    <button @click="add2">添加2</button>
    <button @click="add3">添加3</button>
    <button @click="add4">添加4</button>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      a: 1,
      history: []
    }
  },
  methods: {
    add4() {
      /*const es = new EventSource('http://localhost:3000/')*/
      /*es.onmessage = function(event) {*/
      /*console.log('Message from server - ', event.data)*/
      /*}*/
      /*es.onerror = function(err) {*/
      /*console.error('EventSource failed:', err)*/
      /*es.close()*/
      /*}*/

      fetch('http://localhost:3000/', {
        method: 'GET',
        dataType: 'text/event-stream',
        mode: 'cors'
      })
        .then((response) => response.body) // 获取响应体
        .then((body) => {
          // 创建一个读取流
          const reader = body.getReader()
          ;(function read() {
            reader.read().then(({ done, value }) => {
              let con = ''
              if (done) {
                return
              }
              let json = new TextDecoder('utf-8').decode(value)
              if (json) {
                console.log(json)
              }
              // 递归调用read函数以继续读取数据流
              read()
            })
          })()
        })
    },
    async add() {
      const options = {
        method: 'POST',
        headers: {
          Authorization: 'Bearer sk-jjbjzfrrlurxfvcwbhcclhcedqedpuqiqtlrbxzqyspmsoox',
          'Content-Type': 'application/json'
        },
        body: '{"messages":[{"content":"请说以下明天的天气","role":"user"}],"model":"deepseek-ai/DeepSeek-V2.5"}'
      }

      fetch('https://api.siliconflow.cn/v1/chat/completions', options)
        .then((response) => response.json())
        .then((response) => console.log(response))
        .catch((err) => console.error(err))
    },
    add2() {
      const options = {
        method: 'POST',
        headers: {
          Authorization: 'Bearer 058617fd-cd49-45cd-82ac-4e6791631f8b',
          'Content-Type': 'application/json'
        },
        body:
          '{"model": "bot-20250212160149-bxp6b", "stream": true,"stream_options": {"include_usage": true},"messages": [{"role": "system","content": "You are a helpful assistant."},{"role": "user","content": "Hello!"}]}'
      }

      fetch('https://ark.cn-beijing.volces.com/api/v3/bots/chat/completions', options)
        .then((response) => response.json())
        .then((response) => console.log(response))
        .catch((err) => console.error(err))
    },
    add3() {
      axios
        .post(
          'https://ark.cn-beijing.volces.com/api/v3',
          {
            model: 'ep-20250212154047-x6hz6',
            messages: [
              { role: 'system', content: '你是豆包，是由字节跳动开发的 AI 人工智能助手' },
              { role: 'user', content: '常见的十字花科植物有哪些？' }
            ],
            max_tokens: 4096,
            temperature: 0.1,
            stream: false // 不是流格式的必须为false
          },
          {
            headers: {
              Authorization: `Bearer 058617fd-cd49-45cd-82ac-4e6791631f8b`, // 对应你的key
              'Content-Type': 'application/json' // 指定返回json格式的
            }
          }
        )
        .then((res) => {
          console.log(res)
        })
    }
  },
  watch: {
    a(newValue) {
      console.log(`helloworld`, newValue)
    }
  },
  mounted() {
    console.log(`helloworld`)
    this.a++
  }
}
</script>
<style lang="scss">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
